<template>
	<div class="cus-time">
		<div class="item-con flex" @click="changeShow">
			<el-input readonly :placeholder="placeholder" v-model="time" :disabled="disabled" />
			<i class="el-icon-caret-bottom icon" />
		</div>
		<van-popup v-model="popShow" round position="bottom">
			<van-datetime-picker
				:type="type"
				v-model="currentDate"
				:min-date="minDate"
				:max-date="maxDate"
				:filter="type == 'date' ? dateDefault : dateFilter"
				:formatter="dateFormatter"
				@confirm="confirm"
				@cancel="cancel"
			/>
		</van-popup>
	</div>
</template>

<script>
import dayjs from "dayjs";
import { DatetimePicker, Popup } from "vant";
export default {
	props: {
		value: [String, Number],
		type: String,
		placeholder: String,
		filt: {
			type: Boolean,
			default: false
		},
		disabled: {
			type: Boolean,
			default: false
		},
		fixation: {
			type: Boolean,
			default: true
		},
		minTime: {
			type: Date
		},
		maxTime: {
			type: Date
		},
		valueFormat: {
			type: String,
			default: "YYYY-MM-DD"
		}
	},
	components: {
		VanDatetimePicker: DatetimePicker,
		VanPopup: Popup
	},
	data() {
		return {
			popShow: false,
			currentDate: new Date(),
			time: this.value
		};
	},
	computed: {
		minDate() {
			if (this.minTime) {
				return this.minTime;
			}
			let now = dayjs();
			if (this.type == "date" && this.fixation) {
				return now.subtract(1, "day").toDate();
			} else {
				return now.subtract(50, "year").toDate();
			}
		},
		maxDate() {
			if (this.maxTime) {
				return this.maxTime;
			}
			let now = dayjs();
			if (this.type == "date" && this.fixation) {
				return now.toDate();
			}
			return now.add(50, "year").toDate();
		}
	},
	watch: {
		value() {
			this.init();
		}
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			const { value, type, filt } = this;
			if (value) {
				this.time = dayjs(value).format(this.valueFormat);
				return;
			}
			if (!filt) return;
			this.time = dayjs().format(this.valueFormat);
		},
		dateFormatter(type, val) {
			if (type === "year") {
				return `${val}年`;
			}
			if (type === "month") {
				return `${val}月`;
			}
			if (type === "day") {
				return `${val}日`;
			}
			return val;
		},
		dateFilter(type, options) {
			if (type === "minute") {
				return options.filter(option => option % 30 === 0);
			}
			return options;
		},
		dateDefault(type, options) {
			return options;
		},
		changeShow() {
			if (this.disabled) return;
			this.popShow = true;
		},
		confirm(e) {
			let time = "";
			if (this.type == "date") {
				time = dayjs(e).format("YYYY-MM-DD");
			} else {
				time = dayjs(e).format(this.valueFormat);
			}
			this.time = time;
			this.$emit("input", time);
			this.popShow = false;
		},
		cancel() {
			this.popShow = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.cus-time {
	.item-con {
		align-items: center;
		padding-bottom: 0.1rem;
		border-bottom: 1px solid #dfdfdf;
		.icon {
			color: #999;
		}
	}
}
::v-deep .el-input.is-disabled .el-input__inner {
	background-color: transparent;
}
</style>
